<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MSAC Login</title>

  <!-- 引入提交按钮开始 -->
  <script src="/components/button/submit/index.js"></script>
  <!-- 引入提交按钮结束 -->

  <!-- 引入shoelace开始 -->
  <link rel="stylesheet" href="/lib/node_modules/@shoelace-style/shoelace/dist/themes/light.css" />
  <script type="module" src="/lib/node_modules/@shoelace-style/shoelace/cdn/shoelace.js"></script>
  <!-- 引入shoelace结束 -->

     <!-- 引入loading开始 -->
  <script src="/components/loading/bounce/index.js"></script>
  <!-- 引入loading结束 -->

  <link rel="stylesheet" href="/assets/css/tailwind.css" />
  <link rel="stylesheet" href="/pages/login/index.css" />
  <script src="/utils/locale.js"></script>
  <script src="/config/storage/local.js"></script>
  <script type="module" src="/utils/encrypt.js"></script>
  <script type="module" src="/utils/ajax.js"></script>
  <script type="module" src="/utils/toast.js"></script>
</head>

<template id="template-login">
  <wcs-loading-bounce></wcs-loading-bounce>
  <div class="div-icon">
    <p>
      <img src="/assets/images/icon.png" alt="MSAC" />{{i18n.PlatformText}}
    </p>
  </div>
  <div class="div-locale">
    <sl-select class="select-locale" id="select-locale" title="{{i18n.LocaleText}}" label="">
      <sl-option value="zh">
        简体中文
      </sl-option>
      <sl-option value="en">
        English
      </sl-option>
    </sl-select>
  </div>
  <div class="div-container">
    <svg class="svg-grid">
      <defs>
        <pattern id="grid-bg" width="32" height="32" patternUnits="userSpaceOnUse" x="100%"
          patternTransform="translate(0 -1)">
          <path d="M0 32V.5H32" fill="none" stroke="currentColor"></path>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid-bg)"></rect>
    </svg>
    <form class="box-center">
      <div class="div-login-title">{{i18n.APPAbbreviation}}</div>
      <div class="div-login-text">{{i18n.UserNameText}}</div>
      <div class="div-login-input">
        <input title="username" type="text" name="username" placeholder="{{i18n.UserNamePrompt}}" />
      </div>
      <div class="div-login-text">{{i18n.PasswordText}}</div>
      <div class="div-login-input">
        <input autocomplete="off" title="password" type="password" name="password" />
      </div>
      <div class="div-login-text div-login-button">
      <div class="alert-toast-wrapper">
        <wcs-btn-submit id="button-login" class="button-login">
          <span>{{i18n.SignInText}}</span>
        </wcs-btn-submit>
      </div>
      </div>
      <div class="div-login-footer">
        <p>
          <a href="/pages/account/password/reset">{{i18n.ForgotPasswordText}}</a>
          <a href="/pages/account/register">{{i18n.RegisterText}}</a>
        </p>
      </div>
      <div class="div-login-footer"></div>
    </form>
  </div>
  <div class="div-footer">
    <footer>{{i18n.LoginFooter}}</footer>
  </div>
</template>

<body id="content-login">

</body>
<script src="/pages/login/index.js"></script>

</html>